 //ClientHeight.vue配置
<template>
  <div class="th-back-top" v-show="flag" @click="clickHidden">
    <i class="el-icon-caret-top"></i>
  </div>
</template>
<script>
export default {
    data(){
      return{
        flag: false,
      }
    },

    mounted(){
      window.addEventListener("scroll",()=>{
        //获取页面滚动的高度
        let scrollTop = document.documentElement.scrollTop;
        this.flag = scrollTop > 100;
      }) 
    },

    methods:{
      clickHidden(){
        // document.documentElement.scrollTop = 0;   
        
        // 带滚动效果返回顶部
        let top = document.documentElement.scrollTop || document.body.scrollTop
        let splitheight= top / 20
        // 实现滚动效果
        const timeTop = setInterval(() => {
          document.body.scrollTop = document.documentElement.scrollTop = top -= splitheight
          if (top <= 0) {
            clearInterval(timeTop)
          }
        }, 10)
      }
    }
}
</script>

<style lang="less" scoped>
.th-back-top{
  animation: 1s appear;
  position: fixed;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 4px 0 #e2e2e2;
  cursor: pointer;
  z-index: 20;
  right: 18vw;
  bottom: 50px;

  @keyframes appear {
    0% {
      opacity: 0;
    }
  }
}

@media screen and (max-width: 1023px) {
  .th-back-top{
    right: 20px;
    bottom: 20px;
  }
}
</style>